<template>
  <div class="user_details backTop">
    <van-nav-bar>
      <template #left>
        <img
          src="https://i1.douguo.com//static/wap/img/m/back.png"
          class="goback"
          @click="onClickLeft"
          ref="topLeft"
        />
      </template>
      <!-- <template #title>
        <div class="topTitle">用户详情</div>
      </template> -->
      <template #right>
        <img
          src="https://i1.douguo.com//upload/banner/1576635352.png"
          class="appicon"
        />
      </template>
    </van-nav-bar>
    <div class="user_details_user" v-for="item in userdata">
      <img :src="item.user_photo" class="user_details_user_img" />
      <div class="user_details_user_name">
        {{ item.nick }} <span>LV.{{ item.lvl }}</span>
      </div>
      <div class="user_details_user_info">
        <span>粉丝 {{ item.followers_count }}</span
        ><span>关注 {{ item.following_count }}</span>
        <span>IP属地 {{ item.ip_address_location }}</span>
      </div>
    </div>
    <div
      class="followButton"
      :class="{ followButtonactive: isAttention }"
      @click="changeisAttention"
    >
      {{ isAttention ? "已关注" : "关注" }}
    </div>
    <van-tabs v-model:active="active" color="#ffa500" @click-tab="onClickTab">
      <van-tab title-style="{font-size: 16px}">
        <template #title>
          <div class="title">笔记</div>
        </template>
        <div class="user_details_user_content_list" v-for="item in notesdata">
          <div class="user_details_user_content_list_item">
            <div class="item_year" v-if="item.r">{{ item.year_text }}</div>
            <div class="item_date">
              <span class="item_day">{{ item.day_text }}</span>
              <span class="item_month">{{ item.month_text }}</span>
            </div>

            <div
              class="item_content"
              v-for="item1 in item.day_list"
              @click="clickcl(item1.id)"
            >
              <div
                class="item_img"
                :style="{ backgroundImage: `url(${item1.image_u})` }"
              ></div>
              <div class="item_content_text">
                <p
                  class="user_details_user_content_list_item_title van-ellipsis"
                >
                  {{ item1.title }}
                </p>
                <div class="publish-time">
                     <span>{{item1.publishtime}}发布</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>

      <van-tab>
        <template #title>
          <div class="title">菜谱</div>
        </template>
        <div class="cookBookList_content">
          <div class="cookBookList" v-for="item in cookbookdata">
            <div class="cookBookList_item" @click="clickcl1(item.r.id)">
              <div
                class="cookBookList_item_img"
                :style="`background: url(${item.r.img}); background-size: cover;`"
              >
                <div class="cookBookList_item_mask">
                  {{ item.r.recommend_label }}
                </div>
              </div>
              <div class="cookBookList_item_text">
                {{ item.r.n }}
              </div>
            </div>
          </div>
        </div>
      </van-tab>

      <van-tab>
        <template #title>
          <div class="title">收藏</div>
        </template>

        <div class="colection_content">
          <div
            class="colection"
            v-for="item in colectiondata"
            style="float: left; margin-left: 7px"
          >
            <div class="colection_item">
              <div @click="clickcl2(item.id)">
                <div
                  class="colection_item_img"
                  :style="`background: url(${item.thumb_path}); background-size: cover;`"
                ></div>
                <div class="colection_item_text van-ellipsis">
                  {{ item.n }}
                </div>
              </div>

              <div
                class="colection_item_user"
                style="display: flex; margin-top: 10px; margin-bottom: 10px"
                @click="changeuser(item.a.id)"
              >
                <div
                  class="colection_item_user_img"
                  :style="`background: url(${item.a.p}); background-size: cover; width:30px; height: 30px; border-radius: 50%;margin-left: 10px;`"
                ></div>
                <div
                  class="colection_item_user_name van-ellipsis"
                  style="
                    font-size: small;
                    width: 120px;
                    height: 18px;
                    margin-left: 10px;
                    margin-top: 5px;
                  "
                >
                  {{ item.a.n }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div class="bottom_text" ref="bottom_text">没有更多了</div>
    <Login></Login>
      <van-back-top right="15" bottom="15" class="back_top"/>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useHomeStore } from "@/stores/home";
import { useLogin, useLogining } from "../stores/index";
import {
  getUserDetails,
  getUserNotesdata,
  getCookbook,
  getCollection,
} from "../api/api";
import { reactive } from "vue";
const store = useHomeStore();

const active = ref(0);
let router: any = useRouter();
let route: any = useRoute();
let getuserdata: boolean = false;
let userid: string = "";
let userdata: any = ref<Array<any>>([]);
let notesdata: any = ref<Array<any>>([]);
let cookbookdata: any = ref<Array<any>>([]);
let colectiondata: any = ref<Array<any>>([]);
let bottom_text = ref<any>(null);
let nodespages: number = 1;
let uselogin: any = useLogin();
let uselogining: any = useLogining();
// 关注
let isAttention: any = ref<boolean>(false);

// 改变关注状态
let changeisAttention = () => {
  if (uselogining.isLogining == 1) {
    // 关注
    if (!isAttention.value) {
      store.addFollowList(Number(userid));
    } else {
      // 取消关注
      store.removeFollowList(Number(userid));
    }
    isAttention.value = !isAttention.value;
  } else {
    // 跳转到登录界面
    uselogin.updateLogin(true);
  }
};
// 跳转笔记详情页面
let clickcl = function (id: string) {
  router.push({ name: "Notebook2", params: { id: id,path:route.fullPath } });
};

// 跳转菜谱详情页面
let clickcl1 = function (id: string) {
  router.push({ name: "MenuDetail", params: { menuId: id,path:route.fullPath } });
};

// 跳转收藏详情页面
let clickcl2 = function (id: string) {
  router.push({ name: "MenuDetail", params: { menuId: id,path:route.fullPath } });
};

// 切换tab
let onClickTab = () => {
  nodespages = 1;
};

// 切换总方法
let totalmethod = (id: string) => {
  userdata.value = [];
  notesdata.value = [];
  cookbookdata.value = [];
  colectiondata.value = [];
  getUserDetails(id).then((res: any) => {
    userdata.value.push(res.data.result.user);
  });
  getUserNotesdata(id, nodespages).then((res: any) => {
    notesdata.value = res.data.result.notes;
  });
  getCookbook(id, nodespages).then((res: any) => {
    cookbookdata.value = res.data.result.list;
  });
  getCollection(id, nodespages).then((res: any) => {
    colectiondata.value = res.data.result.recipes;
  });
};

// 返回
let onClickLeft = () => {
   router.push(route.params.path);
};

// 切换用户
let changeuser = (id: string) => {
  router.push({ name: "userdetails", params: { id: id } });

  active.value = 0;
  totalmethod(id);
  userid = id;
  let isLogin = localStorage.getItem("isLogin");
  if (isLogin) {
    let home: any = localStorage.getItem("home");
    home = JSON.parse(home).followList;
    if (home.indexOf(id) != -1) {
      isAttention.value = true;
    } else {
      isAttention.value = false;
    }
  } else {
    isAttention.value = false;
  }
}
onMounted((): void => {
  // 登录凭证
  let useLogining = localStorage.getItem("isLogin");
  let paramsId: string = route.params.id;
  userid = paramsId;
  if (useLogining) {
    uselogining.updateLogining(useLogining);
    let arr: any = localStorage.getItem("home");
    arr = JSON.parse(arr).followList;
    if (arr.every((item: any) => item != paramsId)) {
      isAttention.value = false;
    } else {
      isAttention.value = true;
    }
  } else {
    isAttention.value = false;
  }

  // 获取用户id
  getUserDetails(paramsId).then((res: any) => {
    userdata.value.push(res.data.result.user);
  });
  // 获取用户笔记
  getUserNotesdata(paramsId, nodespages).then((res: any) => {
    if (res.status == 200) {
      notesdata.value = res.data.result.notes;
      console.log( notesdata.value)
    }
    getuserdata = true;
  });
  // 获取用户菜谱
  getCookbook(paramsId, nodespages).then((res: any) => {
    cookbookdata.value = res.data.result.list;
  });
  // 获取用户收藏
  getCollection(paramsId, nodespages).then((res: any) => {
    colectiondata.value = res.data.result.recipes;
  });
  // 监听滚动事件
  window.addEventListener("scroll", () => {
    if (
      window.innerHeight + window.scrollY >= document.body.offsetHeight &&
      getuserdata == true
    ) {
      nodespages++;
      getuserdata = false;
      if (active.value == 0) {
        getUserNotesdata(paramsId, nodespages).then((res: any) => {
          notesdata.value = res.data.result.notes;
          getuserdata = true;
        });
      } else if (active.value == 1) {
        getCookbook(paramsId, nodespages).then((res: any) => {
          cookbookdata.value = res.data.result.list;
        });
      } else if (active.value == 2) {
        getCollection(paramsId, nodespages).then((res: any) => {
          colectiondata.value = res.data.result.recipes;
        });
      }
    }
  });
});
</script>

<style scoped lang="scss">
.user_details {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}

.followButton.followButtonactive {
  color: rgb(134, 134, 134);
  background-color: rgb(218, 218, 218);
  border-radius: 80px;
}

.bottom_text {
  text-align: center;
  height: 20px;
  line-height: 20px;
  color: gray;
  width: 100%;
  position: static;
  bottom: 0;
  margin-top: 20px;
}

.user_details_user_content_list {
  padding: 0 15px;
  margin-top: 20px;

  .user_details_user_content_list_item {
    position: relative;

    .item_year {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .item_date {
      position: absolute;

      .item_day {
        display: block;
        font-size: 20px;
        font-weight: bold;
      }

      .item_month {
        font-size: 14px;
        color: gray;
        font-weight: bold;
      }
    }

    .item_img {
      height: 240px;
      width: 240px;
      position: absolute;
      left: 80px;
      border-radius: 20px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
    }

    .item_content {
      height: 320px;
    }
    .publish-time{
      text-align: right;
      font-size: 12px;
      color: #777;
       span{
        border-bottom: 1px solid #f1f1f1;
       }
    }
    .item_content_text {
      width: 75%;
      height: 100px;
      position: relative;
      right: 15px;
      top: 250px;
      left: 80px;

      .user_details_user_content_list_item_title {
        font-size: 20px;
        font-weight: bold;
        margin: 0;
      }
    }
  }
}

.followButton {
  width: 180px;
  background-color: orange;
  text-align: center;
  height: 40px;
  border-radius: 40px;
  line-height: 40px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  margin: 15px auto;
  box-sizing: border-box;
}

.appicon {
  width: 90px;
}

.goback {
  width: 14px;
}

.user_details_user {
  margin-top: 45px;
  width: 100%;
  height: 230px;
  position: relative;
  display: flex;
  justify-content: center;
  background-image: url(https://i1.douguo.com/upload/caiku/f/b/6/fb8e207fa987b4f7ac0e8956dfd151d6.jpg);
  background-position: center center;
  background-size: cover;
  color: white;

  .user_details_user_img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 40px);
    top: 40px;
  }

  .user_details_user_name {
    position: absolute;
    top: 125px;
    font-size: 20px;
    font-weight: bolder;

    span {
      display: inline-block;
      background-color: orange;
      color: white;
      font-size: 14px;
      width: 40px;
      line-height: 22px;
      border-radius: 10px;
      text-align: center;
      font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    }
  }

  .user_details_user_info {
    position: absolute;
    top: 160px;

    span {
      margin-right: 10px;
      font-size: 16px;
    }
  }
}

.van-nav-bar {
  width: 100%;
  height: 46px;
  position: fixed;
  top: 0;
  background-color: white;
  border-bottom: 1px solid rgb(245, 237, 237);
}

.cookBookList_content {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.cookBookList_item {
  position: relative;
  margin-top: 10px;
}

.cookBookList_item_img {
  width: 175px;
  height: 175px;
  background-size: cover;
  margin-top: 5px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  overflow: hidden;
}

.cookBookList_item_mask {
  width: 175px;
  height: 20px;
  font-size: 14px;
  background-color: rgba(1, 1, 1, 0.7);
  text-align: center;
  line-height: 20px;
  position: absolute;
  top: calc(175px - 20px);
  left: 0;
  color: white;
}

.cookBookList_item_text {
  font-size: 16px;
  width: 175px;
  margin-top: 8px;
  text-align: center;
}

.colection_content::after {
  content: "";
  display: block;
  clear: both;
}

.colection_content {
  margin-top: 20px;
  padding: 0 5px;

  .colection {
    position: relative;

    .colection_item_img {
      width: 175px;
      height: 175px;
      margin-top: 5px;
    }
  }
}

.colection_item_text {
  font-size: 16px;
  width: 165px;
  margin: 0 auto;
  text-align: center;
  margin-top: 5px;
}

</style>
